JavaScript இறக்குமதி உறுதிமொழிகள்: தொகுதி வகை பாதுகாப்பு மற்றும் சரிபார்ப்பில் ஒரு ஆழமான பார்வை

JavaScript சுற்றுச்சூழல் தொடர்ந்து வளர்ந்து வருகிறது, மேலும் சமீபத்திய ஆண்டுகளில் ES தொகுதிகளின் (ESM) அதிகாரப்பூர்வ தரப்படுத்தல் மிக முக்கியமான முன்னேற்றங்களில் ஒன்றாகும். இந்த அமைப்பு குறியீட்டை ஒழுங்கமைத்து பகிர்வதற்கு ஒரு ஒருங்கிணைந்த, உலாவி-சொந்த வழியைக் கொண்டு வந்தது. இருப்பினும், தொகுதிகளின் பயன்பாடு JavaScript கோப்புகளுக்கு அப்பால் விரிவடைந்ததால், ஒரு புதிய சவால் எழுந்தது: தெளிவின்மை அல்லது பாதுகாப்பு அபாயங்கள் இல்லாமல் JSON உள்ளமைவு கோப்புகள் போன்ற பிற வகை உள்ளடக்கங்களை எவ்வாறு பாதுகாப்பாகவும் வெளிப்படையாகவும் இறக்குமதி செய்வது? இதற்கான பதில் ஒரு சக்திவாய்ந்த, ஆனால் வளர்ந்து வரும் அம்சத்தில் உள்ளது: இறக்குமதி உறுதிமொழிகள்.

இந்த விரிவான வழிகாட்டி இந்த அம்சத்தைப் பற்றி நீங்கள் தெரிந்து கொள்ள வேண்டிய அனைத்தையும் உங்களுக்குக் கற்பிக்கும். அவை என்ன, அவை தீர்க்கும் முக்கியமான சிக்கல்கள், இன்று உங்கள் திட்டங்களில் அவற்றை எவ்வாறு பயன்படுத்துவது மற்றும் அவை மிகவும் பொருத்தமான "இறக்குமதி பண்புக்கூறுகள்" ஆக மாறும்போது அவற்றின் எதிர்காலம் எப்படி இருக்கும் என்பதை ஆராய்வோம்.

இறக்குமதி உறுதிமொழிகள் என்றால் என்ன?

அதன் மையத்தில், ஒரு இறக்குமதி உறுதிமொழி என்பது நீங்கள் ஒரு `import` கூற்றுடன் வழங்கும் இன்லைன் மெட்டாடேட்டாவின் ஒரு பகுதியாகும். இந்த மெட்டாடேட்டா இறக்குமதி செய்யப்பட்ட தொகுதியின் வடிவமைப்பாக நீங்கள் என்ன எதிர்பார்க்கிறீர்கள் என்பதை JavaScript இயந்திரத்திற்கு சொல்கிறது. இது இறக்குமதி வெற்றி பெறுவதற்கான ஒப்பந்தமாகவோ அல்லது முன்நிபந்தனையாகவோ செயல்படுகிறது.

தொடரியல் சுத்தமாகவும் கூடுதலாகவும் உள்ளது, `assert` என்ற முக்கிய வார்த்தையைப் பயன்படுத்தி, அதைத் தொடர்ந்து ஒரு பொருள் இருக்கும்:

import jsonData from "./config.json" assert { type: "json" };

இதை உடைப்போம்:

• import jsonData from "./config.json": இது நாம் ஏற்கனவே அறிந்த நிலையான ES தொகுதி இறக்குமதி தொடரியல் ஆகும்.
• assert { ... }: இது புதிய பகுதி. `assert` என்ற முக்கிய சொல், தொகுதியைப் பற்றிய ஒரு உறுதிமொழியை நாங்கள் வழங்குகிறோம் என்பதைக் குறிக்கிறது.
• type: "json": இது உறுதிமொழி. இந்த வழக்கில், `./config.json` இல் உள்ள ஆதாரம் JSON தொகுதியாக இருக்க வேண்டும் என்று நாங்கள் உறுதியளிக்கிறோம்.

JavaScript இயக்க நேரம் கோப்பை ஏற்று, அது சரியான JSON இல்லை என்று தீர்மானித்தால், அதை JavaScript ஆக பாகுபடுத்தவோ அல்லது இயக்கவோ முயற்சிப்பதற்குப் பதிலாக, பிழையைத் தூக்கி இறக்குமதியை தோல்வியடையச் செய்யும். இந்த எளிய சரிபார்ப்பு அம்சத்தின் சக்தியின் அடித்தளமாகும், இது தொகுதி ஏற்றுதல் செயல்பாட்டில் மிகவும் தேவையான கணிப்பு மற்றும் பாதுகாப்பைக் கொண்டுவருகிறது.

"ஏன்": முக்கியமான நிஜ உலக சிக்கல்களைத் தீர்ப்பது

இறக்குமதி உறுதிமொழிகளை முழுமையாகப் பாராட்ட, அவற்றின் அறிமுகத்திற்கு முன்னர் டெவலப்பர்கள் எதிர்கொண்ட சவால்களை நாம் திரும்பிப் பார்க்க வேண்டும். JSON கோப்புகளை இறக்குமதி செய்வதே முதன்மையான பயன்பாட்டு நிகழ்வாக இருந்து வருகிறது, இது ஆச்சரியப்படும் விதமாக துண்டு துண்டான மற்றும் பாதுகாப்பற்ற செயல்முறையாகும்.

முன்-உறுதிமொழி சகாப்தம்: JSON இறக்குமதிகளின் காட்டு மேற்கு

இந்த தரநிலைக்கு முன், உங்கள் திட்டத்தில் JSON கோப்பை இறக்குமதி செய்ய விரும்பினால், உங்கள் விருப்பங்கள் சீரற்றதாக இருந்தன:

1. Node.js (CommonJS): நீங்கள் `require('./config.json')` ஐப் பயன்படுத்தலாம், மேலும் Node.js கோப்பை உங்களுக்காக JavaScript பொருளாக மாற்றும். இது வசதியானது ஆனால் தரமற்றது மற்றும் உலாவிகளில் வேலை செய்யவில்லை.
2. தொகுப்பாளர்கள் (Webpack, Rollup): Webpack போன்ற கருவிகள் `import config from './config.json'` ஐ அனுமதிக்கின்றன. இருப்பினும், இது சொந்த JavaScript நடத்தை அல்ல. தொகுப்பாளர் JSON கோப்பை உருவாக்கத்தின் போது திரைமறைவில் JavaScript தொகுதியாக மாற்றுகிறார். இது வளர்ச்சி சூழலுக்கும் சொந்த உலாவி செயல்பாட்டிற்கும் இடையே ஒரு துண்டிப்பை உருவாக்கியது.
3. உலாவி (Fetch API): உலாவி-சொந்த வழி `fetch` ஐப் பயன்படுத்துவதாகும்:
   const response = await fetch('./config.json');
const config = await response.json();
   இது வேலை செய்கிறது, ஆனால் இது இன்னும் விரிவானது மற்றும் ES தொகுதி வரைபடத்துடன் சுத்தமாக ஒருங்கிணைக்கப்படவில்லை.

ஒருங்கிணைந்த தரநிலை இல்லாததால் இரண்டு முக்கிய சிக்கல்கள் ஏற்பட்டன: எடுத்துச் செல்லும் சிக்கல்கள் மற்றும் குறிப்பிடத்தக்க பாதுகாப்பு பாதிப்பு.

பாதுகாப்பை மேம்படுத்துதல்: MIME வகை குழப்ப தாக்குதல்களைத் தடுப்பது

இறக்குமதி உறுதிமொழிகளுக்கான மிகவும் கட்டாய காரணம் பாதுகாப்பு. உங்கள் வலை பயன்பாடு ஒரு சேவையகத்திலிருந்து உள்ளமைவு கோப்பை இறக்குமதி செய்யும் சூழ்நிலையை கருத்தில் கொள்ளுங்கள்:

import settings from "https://api.example.com/settings.json";

ஒரு உறுதிமொழி இல்லாமல், உலாவி கோப்பின் வகையை யூகிக்க வேண்டும். இது கோப்பு நீட்டிப்பைப் பார்க்கலாம் (`.json`) அல்லது, மிக முக்கியமாக, சேவையகத்தால் அனுப்பப்பட்ட `Content-Type` HTTP தலைப்பைப் பார்க்கலாம். ஆனால் ஒரு தீங்கிழைக்கும் நபர் (அல்லது தவறாக உள்ளமைக்கப்பட்ட சேவையகம் கூட) JavaScript குறியீட்டைக் கொண்டு பதிலளித்தால் என்ன செய்வது, ஆனால் `Content-Type` ஐ `application/json` ஆக வைத்திருந்தால் அல்லது `application/javascript` ஐ அனுப்பினால் என்ன செய்வது?

அந்த விஷயத்தில், இயக்கமற்ற JSON தரவைப் பாகுபடுத்த மட்டுமே எதிர்பார்த்துக் கொண்டிருந்தபோது, ​​தன்னிச்சையான JavaScript குறியீட்டை இயக்க உலாவி ஏமாற்றப்படலாம். இது குறுக்கு-தள ஸ்கிரிப்டிங் (XSS) தாக்குதல்களுக்கும் பிற கடுமையான பாதிப்புகளுக்கும் வழிவகுக்கும்.

இறக்குமதி உறுதிமொழிகள் இதை நேர்த்தியாக தீர்க்கின்றன. `assert { type: 'json' }` சேர்ப்பதன் மூலம், நீங்கள் JavaScript இயந்திரத்திற்கு வெளிப்படையாக அறிவுறுத்துகிறீர்கள்:

"ஆதாரம் சரிபார்க்கக்கூடிய JSON தொகுதியாக இருந்தால் மட்டுமே இந்த இறக்குமதியுடன் தொடரவும். வேறு ஏதேனும் குறிப்பாக இயக்கக்கூடிய ஸ்கிரிப்ட் இருந்தால், உடனடியாக நிறுத்தவும்."

இயந்திரம் இப்போது ஒரு கடுமையான சரிபார்ப்பை செய்யும். தொகுதியின் MIME வகை சரியான JSON வகை ( `application/json` போன்றவை) இல்லையென்றால் அல்லது உள்ளடக்கம் JSON ஆக பாகுபடுத்தத் தவறினால், இறக்குமதி `TypeError` உடன் நிராகரிக்கப்படும், எந்த தீங்கிழைக்கும் குறியீடும் இயங்குவதைத் தடுக்கும்.

கணிப்பு மற்றும் எடுத்துச் செல்லும் தன்மையை மேம்படுத்துதல்

JavaScript அல்லாத தொகுதிகள் எவ்வாறு இறக்குமதி செய்யப்படுகின்றன என்பதை தரப்படுத்துவதன் மூலம், உறுதிமொழிகள் உங்கள் குறியீட்டை மிகவும் கணிக்கக்கூடியதாகவும் எடுத்துச் செல்லக்கூடியதாகவும் ஆக்குகின்றன. Node.js இல் வேலை செய்யும் குறியீடு இப்போது உலாவி அல்லது டெனோவில் தொகுப்பி-குறிப்பிட்ட மந்திரத்தை நம்பாமல் அதே வழியில் வேலை செய்யும். இந்த வெளிப்படைத்தன்மை தெளிவின்மையை நீக்குகிறது மற்றும் டெவலப்பரின் நோக்கத்தை படிகமாக தெளிவாக ஆக்குகிறது, இது மிகவும் வலுவான மற்றும் பராமரிக்கக்கூடிய பயன்பாடுகளுக்கு வழிவகுக்கிறது.

இறக்குமதி உறுதிமொழிகளை எவ்வாறு பயன்படுத்துவது: ஒரு நடைமுறை வழிகாட்டி

இறக்குமதி உறுதிமொழிகளை நிலையான மற்றும் மாறும் இறக்குமதிகளுடன் பல்வேறு JavaScript சூழல்களில் பயன்படுத்தலாம். சில நடைமுறை உதாரணங்களைப் பார்ப்போம்.

நிலையான இறக்குமதிகள்

நிலையான இறக்குமதிகள் மிகவும் பொதுவான பயன்பாட்டு நிகழ்வு. அவை ஒரு தொகுதியின் மேல் மட்டத்தில் அறிவிக்கப்படுகின்றன மற்றும் தொகுதி முதலில் ஏற்றப்படும்போது தீர்க்கப்படும்.

உங்கள் திட்டத்தில் `package.json` கோப்பு இருப்பதாக கற்பனை செய்து பாருங்கள்:

package.json:

            
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "A sample project."
}

            

              
                Copy
              
            
          

நீங்கள் அதன் உள்ளடக்கத்தை நேரடியாக உங்கள் JavaScript தொகுதியில் இறக்குமதி செய்யலாம்:

main.js:

            
import pkg from './package.json' assert { type: 'json' };

console.log(`Running ${pkg.name} version ${pkg.version}.`);
// Output: Running my-project version 1.0.0.

            

              
                Copy
              
            
          

இங்கே, `pkg` மாறிலி `package.json` இலிருந்து பாகுபடுத்தப்பட்ட தரவைக் கொண்டிருக்கும் ஒரு வழக்கமான JavaScript பொருளாக மாறும். தொகுதி ஒரு முறை மட்டுமே மதிப்பிடப்படுகிறது, மேலும் மற்ற ES தொகுதி போலவே முடிவும் சேமிக்கப்படுகிறது.

மாறும் இறக்குமதிகள்

கோட்பிளவு, சோம்பேறி ஏற்றுதல் அல்லது பயனர் தொடர்பு அல்லது பயன்பாட்டு நிலையின் அடிப்படையில் ஆதாரங்களை ஏற்றுவதற்கு மாறும் `import()` பயன்படுத்தப்படுகிறது. இறக்குமதி உறுதிமொழிகள் இந்த தொடரியலுடன் தடையின்றி ஒருங்கிணைக்கப்படுகின்றன.

உறுதிமொழி பொருள் `import()` செயல்பாட்டிற்கு இரண்டாவது வாதமாக அனுப்பப்படுகிறது.

பல மொழிகளை ஆதரிக்கும் ஒரு பயன்பாடு உங்களிடம் உள்ளது என்று வைத்துக்கொள்வோம், மொழிபெயர்ப்பு கோப்புகள் JSON ஆக சேமிக்கப்பட்டுள்ளன:

locales/en-US.json:

            
{
  "welcome_message": "Hello and welcome!"
}

            

              
                Copy
              
            
          

locales/es-ES.json:

            
{
  "welcome_message": "¡Hola y bienvenido!"
}

            

              
                Copy
              
            
          

பயனரின் விருப்பத்தின் அடிப்படையில் சரியான மொழி கோப்பை நீங்கள் இயக்கவியல் ரீதியாக ஏற்றலாம்:

app.js:

            
async function loadLocalization(locale) {
  try {
    const translations = await import(`./locales/${locale}.json`, {
      assert: { type: 'json' }
    });
    
    // The default export of a JSON module is its content
    document.getElementById('welcome').textContent = translations.default.welcome_message;

  } catch (error) {
    console.error(`Failed to load localization for ${locale}:`, error);
    // Fallback to a default language
  }
}

const userLocale = navigator.language || 'en-US'; // e.g., 'es-ES'
loadLocalization(userLocale);

            

              
                Copy
              
            
          

JSON தொகுதிகளுடன் மாறும் இறக்குமதியைப் பயன்படுத்தும்போது, ​​பாகுபடுத்தப்பட்ட பொருள் பெரும்பாலும் திரும்பிய தொகுதி பொருளின் `default` சொத்தில் கிடைக்கும் என்பதை நினைவில் கொள்க. இது நுட்பமான ஆனால் முக்கியமான விவரம்.

சுற்றுச்சூழல் இணக்கம்

இறக்குமதி உறுதிமொழிகளுக்கான ஆதரவு இப்போது நவீன JavaScript சுற்றுச்சூழல் முழுவதும் பரவலாக உள்ளது:

• உலாவிகள்: Chrome மற்றும் Edge இல் பதிப்பு 91 முதல் ஆதரிக்கப்படுகிறது, Safari பதிப்பு 17 முதல் மற்றும் Firefox பதிப்பு 117 முதல் ஆதரிக்கப்படுகிறது. சமீபத்திய நிலைக்கு எப்போதும் CanIUse.com ஐப் பார்க்கவும்.
• Node.js: பதிப்பு 16.14.0 முதல் ஆதரிக்கப்படுகிறது (v17.1.0+ இல் இயல்பாக இயக்கப்பட்டது). இது இறுதியாக Node.js ஆனது CommonJS (`require`) மற்றும் ESM (`import`) இரண்டிலும் JSON ஐ எவ்வாறு கையாள்கிறது என்பதை ஒருங்கிணைத்தது.
• Deno: ஒரு நவீன, பாதுகாப்பு சார்ந்த இயக்க நேரம், Deno ஆரம்பத்தில் ஏற்றுக்கொள்ளப்பட்டது மற்றும் நீண்ட காலமாக வலுவான ஆதரவு உள்ளது.
• தொகுப்பாளர்கள்: Webpack, Vite மற்றும் Rollup போன்ற முக்கிய தொகுப்பாளர்கள் அனைவரும் `assert` தொடரியலை ஆதரிக்கிறார்கள், உங்கள் குறியீடு வளர்ச்சி மற்றும் உற்பத்தி கட்டமைப்புகளில் தொடர்ந்து வேலை செய்வதை உறுதி செய்கிறார்கள்.

வளர்ச்சி: `assert` இலிருந்து `with` (இறக்குமதி பண்புக்கூறுகள்)

வலை தரநிலைகளின் உலகம் மீண்டும் மீண்டும் வருகிறது. இறக்குமதி உறுதிமொழிகள் செயல்படுத்தப்பட்டு பயன்படுத்தப்பட்டதால், TC39 குழு (JavaScript ஐ தரப்படுத்துகிறது) கருத்துக்களை சேகரித்து, "உறுதிமொழி" என்ற சொல் அனைத்து எதிர்கால பயன்பாட்டு நிகழ்வுகளுக்கும் சிறந்த பொருத்தமாக இருக்காது என்பதை உணர்ந்தது.

ஒரு "உறுதிமொழி" என்பது கோப்பின் உள்ளடக்கங்களில் செய்யப்பட்ட சரிபார்ப்பைக் குறிக்கிறது *அது எடுக்கப்பட்ட பிறகு* (ஒரு இயக்க நேர சரிபார்ப்பு). இருப்பினும், இந்த மெட்டாடேட்டா தொகுதி எவ்வாறு எடுப்பது மற்றும் பாகுபடுத்துவது என்பது குறித்த இயந்திரத்திற்கு ஒரு உத்தரவாகவும் செயல்படக்கூடும் (ஏற்ற-நேர அல்லது இணைப்பு-நேர உத்தரவு) என்று குழு கற்பனை செய்தது.

உதாரணமாக, நீங்கள் CSS கோப்பை CSS என்பதை சரிபார்க்காமல், கட்டக்கூடிய ஸ்டைல்ஷீட் பொருளாக இறக்குமதி செய்ய விரும்பலாம். இது ஒரு சரிபார்ப்பை விட ஒரு அறிவுறுத்தல் ஆகும்.

இந்த பரந்த நோக்கத்தை நன்கு பிரதிபலிக்கும் வகையில், முன்மொழிவு இறக்குமதி உறுதிமொழிகள் என்பதிலிருந்து இறக்குமதி பண்புக்கூறுகள் என மறுபெயரிடப்பட்டது, மேலும் தொடரியல் `assert` க்கு பதிலாக `with` என்ற முக்கிய சொல்லைப் பயன்படுத்த புதுப்பிக்கப்பட்டது.

எதிர்கால தொடரியல் (`with` ஐப் பயன்படுத்தி):

import config from "./config.json" with { type: "json" };

const translations = await import(`./locales/es-ES.json`, { with: { type: 'json' } });

ஏன் மாற்றம் மற்றும் அது உங்களுக்கு என்ன அர்த்தம்?

`with` என்ற முக்கிய சொல் தேர்ந்தெடுக்கப்பட்டது, ஏனெனில் இது சொற்பொருளாக மிகவும் நடுநிலையானது. இது ஒரு நிபந்தனையை கண்டிப்பாக சரிபார்ப்பதை விட இறக்குமதிக்கான சூழல் அல்லது அளவுருக்களை வழங்குவதை பரிந்துரைக்கிறது. இது எதிர்காலத்தில் பரந்த அளவிலான பண்புகளுக்கு கதவைத் திறக்கிறது.

தற்போதைய நிலை: 2023 இன் பிற்பகுதி மற்றும் 2024 இன் முற்பகுதி வரை, JavaScript இயந்திரங்கள் மற்றும் கருவிகள் ஒரு மாற்ற காலக்கட்டத்தில் உள்ளன. `assert` என்ற முக்கிய சொல் பரவலாக செயல்படுத்தப்பட்டுள்ளது மற்றும் அதிகபட்ச இணக்கத்தன்மைக்கு இன்று நீங்கள் பயன்படுத்த வேண்டியது அதுதான். இருப்பினும், தரநிலை அதிகாரப்பூர்வமாக `with` க்கு நகர்த்தப்பட்டுள்ளது, மேலும் இயந்திரங்கள் அதை செயல்படுத்தத் தொடங்குகின்றன (`assert` உடன் ஒரு தேய்மான எச்சரிக்கையுடன்).

டெவலப்பர்களுக்கு, இந்த மாற்றத்தைப் பற்றி அறிந்திருப்பது முக்கியமானது. `with` ஐ ஆதரிக்கும் சூழல்களில் உள்ள புதிய திட்டங்களுக்கு, புதிய தொடரியலை ஏற்றுக்கொள்வது புத்திசாலித்தனம். ஏற்கனவே உள்ள திட்டங்களுக்கு, தரநிலையுடன் இணைந்து இருக்க `assert` இலிருந்து `with` க்கு காலப்போக்கில் இடம்பெயர திட்டமிடுங்கள்.

பொதுவான ஆபத்துகள் மற்றும் சிறந்த நடைமுறைகள்

அம்சம் நேரடியானது என்றாலும், மனதில் கொள்ள வேண்டிய சில பொதுவான சிக்கல்கள் மற்றும் சிறந்த நடைமுறைகள் உள்ளன.

ஆபத்து: உறுதிமொழி/பண்புக்கூறை மறப்பது

உறுதிமொழி இல்லாமல் JSON கோப்பை இறக்குமதி செய்ய முயற்சித்தால், நீங்கள் ஒரு பிழையை எதிர்கொள்ள நேரிடும். உலாவி JSON ஐ JavaScript ஆக இயக்க முயற்சிக்கும், இதன் விளைவாக `SyntaxError` ஏற்படும், ஏனெனில் `{` அந்த சூழலில் ஒரு பொருள் லிட்டரல் அல்ல, ஒரு தொகுதியின் தொடக்கத்தைப் போல இருக்கும்.

தவறானது: import config from './config.json';
பிழை: `Uncaught SyntaxError: Unexpected token ':'`

ஆபத்து: சேவையக பக்க MIME வகை தவறான உள்ளமைவு

உலாவிகளில், இறக்குமதி உறுதிமொழி செயல்முறை சேவையகத்தால் திரும்பப் பெறப்பட்ட `Content-Type` HTTP தலைப்பை பெரிதும் நம்பியுள்ளது. உங்கள் சேவையகம் `text/plain` அல்லது `application/javascript` இன் `Content-Type` உடன் `.json` கோப்பை அனுப்பினால், கோப்பு உள்ளடக்கம் முற்றிலும் சரியான JSON ஆக இருந்தாலும், இறக்குமதி `TypeError` உடன் தோல்வியடையும்.

சிறந்த பயிற்சி: `.json` கோப்புகளை `Content-Type: application/json` தலைப்புடன் வழங்க உங்கள் வலை சேவையகம் சரியாக உள்ளமைக்கப்பட்டுள்ளதா என்பதை எப்போதும் உறுதிப்படுத்தவும்.

சிறந்த பயிற்சி: வெளிப்படையாகவும் நிலையானதாகவும் இருங்கள்

JavaScript அல்லாத தொகுதி இறக்குமதிகளுக்கு (முக்கியமாக JSON இப்போது) இறக்குமதி பண்புக்கூறுகளைப் பயன்படுத்த குழு அளவிலான கொள்கையை ஏற்றுக்கொள்ளுங்கள். இந்த நிலைத்தன்மை உங்கள் குறியீட்டுத் தளத்தை மிகவும் படிக்கக்கூடியதாகவும், பாதுகாப்பானதாகவும், சூழல்-குறிப்பிட்ட விசித்திரங்களுக்கு மீள்தன்மையுடையதாகவும் ஆக்குகிறது.

JSON க்கு அப்பால்: இறக்குமதி பண்புக்கூறுகளின் எதிர்காலம்

`with` தொடரியலின் உண்மையான உற்சாகம் அதன் திறனில் உள்ளது. JSON இதுவரை முதல் மற்றும் ஒரே தரப்படுத்தப்பட்ட தொகுதி வகையாக இருந்தாலும், இப்போது மற்றவர்களுக்கும் கதவு திறக்கப்பட்டுள்ளது.

CSS தொகுதிகள்

மிகவும் எதிர்பார்க்கப்பட்ட பயன்பாட்டு நிகழ்வுகளில் ஒன்று CSS கோப்புகளை நேரடியாக தொகுதிகளாக இறக்குமதி செய்வதாகும். CSS தொகுதிகளுக்கான முன்மொழிவு இதை அனுமதிக்கும்:

import sheet from './styles.css' with { type: 'css' };

இந்த சூழ்நிலையில், `sheet` என்பது CSS உரையின் சரமாக இருக்காது, ஆனால் `CSSStyleSheet` பொருளாக இருக்கும். இந்த பொருளை ஒரு ஆவணம் அல்லது நிழல் DOM ரூட்டுக்கு திறமையாகப் பயன்படுத்தலாம்:

document.adoptedStyleSheets = [sheet];

கூறு அடிப்படையிலான கட்டமைப்புகள் மற்றும் வலை கூறுகளை ஸ்டைல்களைக் கையாள்வதற்கான மிகவும் செயல்திறன் மற்றும் இணைக்கப்பட்ட வழி இதுவாகும், ஸ்டைல்டு உள்ளடக்கத்தின் ஃப்ளாஷ் (FOUC) போன்ற சிக்கல்களைத் தவிர்க்கிறது.

பிற சாத்தியமான தொகுதி வகைகள்

சட்டகம் நீட்டிக்கக்கூடியது. எதிர்காலத்தில், பிற வலை சொத்துக்களுக்கான தரப்படுத்தப்பட்ட இறக்குமதிகளை நாம் காணலாம், ES தொகுதி அமைப்பை மேலும் ஒருங்கிணைக்கிறது:

• HTML தொகுதிகள்: HTML கோப்புகளை இறக்குமதி செய்து பாகுபடுத்துவதற்கு, ஒருவேளை டெம்ப்ளேட்டிங்கிற்காக.
• WASM தொகுதிகள்: WebAssembly ஐ ஏற்றும்போது கூடுதல் மெட்டாடேட்டா அல்லது உள்ளமைவை வழங்க.
• GraphQL தொகுதிகள்: `.graphql` கோப்புகளை இறக்குமதி செய்து, அவற்றை AST (சுருக்க தொடரியல் மரம்) ஆக முன்கூட்டியே பாகுபடுத்தவும்.

முடிவு

JavaScript இறக்குமதி உறுதிமொழிகள், இப்போது இறக்குமதி பண்புக்கூறுகளாக உருவாகி, தளத்திற்கான ஒரு முக்கியமான படி முன்னேற்றத்தைக் குறிக்கிறது. அவை தொகுதி அமைப்பை JavaScript-மட்டும் அம்சத்திலிருந்து ஒரு பல்துறை, உள்ளடக்கம்-அறியாத ஆதார ஏற்றுபவருக்கு மாற்றுகின்றன.

முக்கிய நன்மைகளை மீண்டும் பார்ப்போம்:

• மேம்படுத்தப்பட்ட பாதுகாப்பு: ஒரு தொகுதியின் வகை டெவலப்பரின் எதிர்பார்ப்புடன் பொருந்துவதை உறுதி செய்வதன் மூலம் அவை MIME வகை குழப்ப தாக்குதல்களைத் தடுக்கின்றன.
• மேம்படுத்தப்பட்ட குறியீடு தெளிவு: தொடரியல் வெளிப்படையானது மற்றும் அறிவிப்பு, ஒரு இறக்குமதியின் நோக்கத்தை உடனடியாகத் தெளிவாக ஆக்குகிறது.
• தளம் தரப்படுத்தல்: அவை JSON போன்ற ஆதாரங்களை இறக்குமதி செய்ய ஒரு ஒற்றை, நிலையான வழியை வழங்குகின்றன, Node.js, உலாவிகள் மற்றும் தொகுப்பாளர்கள் இடையேயான துண்டு துண்டான தன்மையை நீக்குகின்றன.
• எதிர்கால-நிரூபண அடித்தளம்: `with` என்ற முக்கிய சொல்லுக்கு மாறுவது CSS, HTML மற்றும் பல போன்ற எதிர்கால தொகுதி வகைகளை ஆதரிக்க தயாராக இருக்கும் நெகிழ்வான அமைப்பை உருவாக்குகிறது.

ஒரு நவீன வலை டெவலப்பராக, இந்த அம்சத்தை ஏற்றுக்கொள்வதற்கான நேரம் இது. இன்று உங்கள் திட்டங்களில் `assert { type: 'json' }` (அல்லது `with { type: 'json' }` ஆதரிக்கப்படும் இடத்தில்) பயன்படுத்தத் தொடங்குங்கள். நீங்கள் பாதுகாப்பான, எடுத்துச் செல்லக்கூடிய மற்றும் அதிக தொலைநோக்கு பார்வை கொண்ட குறியீட்டை எழுதுவீர்கள், அது வலை தளத்தின் அற்புதமான எதிர்காலத்திற்கு தயாராக உள்ளது.